<template>
  <aside class="aside">
    <div id="menu"> <span @click="menuClick()" class="iconfont">&#xe60d;</span></div>
    <div class="zong">
      <nav class="fen">
        <div  ref="menu" id="anniu">
        <div class="center-d">
          <!-- 大头照 -->
          <div class="personal">
            <a
              href="https://space.bilibili.com/274272715?from=search&seid=944472627271950417"
            >
              <img src="@/assets/img/chen.png" alt="" />
            </a>

            <div>
              <h1>雲&ensp; 启</h1>
            </div>
          </div>
          <ul>
            <!-- router-link -->
            <router-link to="/study" tag="li"
              ><span class="iconfont">&#xe60d;</span>网络</router-link
            ><br />
            <router-link to="/biji" tag="li"
              ><span class="iconfont">&#xe68f;</span>笔记</router-link
            ><br />
            <router-link to="/jushi" tag="li"
              ><span class="iconfont">&#xe606;</span>局势</router-link
            ><br />

            <router-link to="/dao" tag="li"
              ><span class="iconfont">&#xe631;</span>传统</router-link
            ><br />
            <router-link to="/sing" tag="li"
              ><span class="iconfont">&#xe624;</span>艺术</router-link
            ><br />
            <router-link to="/ziyuan" tag="li"
              ><span class="iconfont">&#xe60c;</span>资源</router-link
            ><br />
          </ul>
        </div>
        </div>

        <div class="bottom">
          <ul>
            <li>
              <span class="iconfont" style="color: #ff4004">&#xe650;</span>
            </li>
            <li>
              <span class="iconfont" style="color: #ffff99">&#xe696;</span>
            </li>
            <li>
              <span class="iconfont" style="color: #d8346b">&#xe61b;</span>
            </li>
            <!-- <li><span class="iconfont">&#x33;</span></li> -->
          </ul>
        </div>
      </nav>
    </div>
    <!-- END: NAVBAR -->
  </aside>
</template>

<script>
export default {
  name: "aSide",
  methods:{
    menuClick(){
      
      this.$refs.menu.style.display == "block" ? 
      this.$refs.menu.style.display = "none" :
        this.$refs.menu.style.display = "block"
        this.$emit('child-say',this.$refs.menu.style.display)
    }
  }
};
</script>

<style scoped>
@media(max-width:910px){
  #menu{
    display: block !important;
    color: #000;
    position: absolute;
    top: 20px;
    left: 5px;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: #ffffff90;
  }
  #menu span{
    font-size: 45px;
    line-height: 50px;
    padding-left: 3px;
  }

  .shouqi{
    position: absolute;
    left: 50%;
    bottom: 30%;
  }
  .personal{
    display: none !important;;
  }

  #anniu{
    display: none; 
    background-color: #00000090;
    position: absolute;
    margin: auto;
    z-index: 999;
  }
  .center-d li{
    width: 150px !important;
    color: #fff;
    background: #00000090;
  }
  .bottom{
    position: absolute;
    bottom: 10px;
    margin: auto;
    z-index: 99;
  }
}

#menu{
  display: none;
}
.router-link-active {
  background-color: #ffffff50;
}
.aside {
  width: 300px;
  height: 100vh;
  padding-left: 45px;
}
.shouqi{
  display: none;
}
.zong {
  width: 100%;
  height: 100%;
}
.fen {
  position: relative;
  width: 100%;
  height: 100%;
}
.center-d {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 18%;
  left: 10px;
  color: white;
}
.center-d li {
  width: 260px;
  padding: 15px 0;
  border-radius: 10px;
}
.center-d li:hover {
  background-color: #ffffff30;
}
.center-d li span {
  padding: 15px 15px 15px 20px;
}
.personal {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 200px;
  text-align: center;
}

.personal h1 {
  font-size: 20px;
  width: 100%;
  padding: 10px 0;
}

.personal div {
  width: 100%;
}

.personal img {
  padding: 0px 0px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.bottom {
  width: 250px;
  position: absolute;
  bottom: 0;
  padding: 30px 0;
}
.bottom ul {
  display: flex;
  justify-content: center;
}
.bottom ul li {
  padding: 10px;
  color: white;
}
.bottom .iconfont {
  font-size: 25px;
}
</style>